<template>
  <ElCard>
    <ElForm :model="formModel" size="small" ref="formRef" :show-message="false">
      <CardBox header="主要用药情况">
        <br>
        <ElButton type="primary" @click="addRow('medicationSituation')">
          <el-icon>
            <CirclePlus />
          </el-icon>
        </ElButton>
        <ElTable
          :data="formModel.medicationSituation"
          :border="true"
          style="width: 100%"
        >
          <ElTableColumn label="药品名称" required width="150">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`medicationSituation.${$index}.a00_043_03`">
                <!-- <ElInput v-model="row.a00_043_03" /> -->
                <ElSelect
                  :filterable="true"
                  :filter-method="handleFilter"
                  v-model="row.a00_043_03"
                  @change="handleYaoChange($event, $index)"
                >
                  <ElOption
                    v-for="item in yaoList"
                    :key="item.name"
                    :value="item.name"
                  >{{ item.name }}</ElOption
                  >
                </ElSelect>
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="用法">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`medicationSituation.${$index}.a00_043_04`">
                <ElInput v-model="row.a00_043_04" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="用量" width="85px">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`medicationSituation.${$index}.a00_043_09`">
                <ElInput v-model="row.a00_043_09" />
              </ElFormItem>
              次/日，每次
              <ElFormItem :prop="`medicationSituation.${$index}.a00_043_05`">
                <ElInput v-model="row.a00_043_05" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="用药时间">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`medicationSituation.${$index}.a00_043_06`">
                <!--                <ElDatePicker-->
                <!--                  type="date"-->
                <!--                  v-model="row.a00_043_06"-->
                <!--                  format="YYYY-MM-DD"-->
                <!--                  value-format="YYYY-MM-DD"-->
                <!--                />-->

                <!--                <ElInput v-model="row.a00_043_06"/>-->
                <el-select  v-model="row.a00_043_06">
                  <el-option  label="一年" value="一年">一年</el-option>
                  <el-option label="半年" value="半年">半年</el-option>
                  <el-option label="3月" value="3月">3月</el-option>
                  <el-option label="1月" value="1月">1月</el-option>
                </el-select>
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="服药依从性">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`medicationSituation.${$index}.a00_043_07`">
                <el-select  v-model="row.a00_043_07">
                  <el-option  label="连续" value="1">连续</el-option>
                  <el-option label="间断" value="2">间断</el-option>
                  <el-option label="不服药" value="3">不服药</el-option>
                </el-select>
              </ElFormItem>
              <!--              <ElFormItem :prop="`medicationSituation.${$index}.a00_043_07`">-->
              <!--                <ElRadioGroup v-model="row.a00_043_07">-->
              <!--                  <ElRadio-->
              <!--                    v-for="(value, index) in formSource.a00_043_07"-->
              <!--                    :key="index"-->
              <!--                    :label="index"-->
              <!--                    >{{ value }}-->
              <!--                  </ElRadio>-->
              <!--                </ElRadioGroup>-->
              <!--  -->
              <!--              </ElFormItem>-->
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" style="width: 55px">
            <template #default="{ $index }">
              <ElButton style="width: 20px"
                        type="danger"
                        @click="removeRow($index, 'medicationSituation')"
              >删</ElButton
              >
            </template>
          </ElTableColumn>
        </ElTable>
      </CardBox>
      <br />
      <CardBox header="家庭病床史">
        <br>
        <ElButton type="primary" @click="addRow('familyHospitalBed')">
          <el-icon>
            <CirclePlus />
          </el-icon>
        </ElButton>
        <ElTable
          :data="formModel.familyHospitalBed"
          :border="true"
          :fit="true"
          :flexible="true"
          style="width: 100%"
        >
          <ElTableColumn label="建床日期">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`familyHospitalBed.${$index}.a00_042_03`">
                <ElDatePicker
                  type="date"
                  v-model="row.a00_042_03"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="撤床日期">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`familyHospitalBed.${$index}.a00_042_04`">
                <ElDatePicker
                  type="date"
                  v-model="row.a00_042_04"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="原因">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`familyHospitalBed.${$index}.a00_042_05`">
                <ElInput type="textarea" v-model="row.a00_042_05" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="医疗机构名称">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`familyHospitalBed.${$index}.a00_042_06`">
                <ElInput v-model="row.a00_042_06" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="病案号">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`familyHospitalBed.${$index}.a00_042_07`">
                <ElInput v-model="row.a00_042_07" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作">
            <template #default="{ $index }">
              <ElButton
                type="danger"
                @click="removeRow($index, 'familyHospitalBed')"
                >删除</ElButton
              >
            </template>
          </ElTableColumn>
        </ElTable>
      </CardBox>
      <br />
      <CardBox header="住院史">
        <br>
        <ElButton type="primary" @click="addRow('hospitalHistory')">
          <el-icon>
            <CirclePlus />
          </el-icon>
        </ElButton>
        <ElTable
          :data="formModel.hospitalHistory"
          :border="true"
          style="width: 100%"
        >
          <ElTableColumn label="入院时间" required>
            <template #default="{ row, $index }">
              <ElFormItem :prop="`hospitalHistory.${$index}.a00_041_03`">
                <ElDatePicker
                  type="date"
                  v-model="row.a00_041_03"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="出院日期" required>
            <template #default="{ row, $index }">
              <ElFormItem :prop="`hospitalHistory.${$index}.a00_041_04`">
                <ElDatePicker
                  type="date"
                  v-model="row.a00_041_04"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="住院原因">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`hospitalHistory.${$index}.a00_041_05`">
                <ElInput type="textarea" v-model="row.a00_041_05" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="医疗机构名称">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`hospitalHistory.${$index}.a00_041_06`">
                <ElInput v-model="row.a00_041_06" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="病案号">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`hospitalHistory.${$index}.a00_041_07`">
                <ElInput v-model="row.a00_041_07" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作">
            <template #default="{ $index }">
              <ElButton
                type="danger"
                @click="removeRow($index, 'hospitalHistory')"
              >删除</ElButton
              >
            </template>
          </ElTableColumn>
        </ElTable>
      </CardBox>
    </ElForm>
  </ElCard>
</template>
<script lang="ts" setup>
import { ITreatmentCondition } from "@/model";
import { reactive, ref, toRaw, watch } from "vue";
import { tjwx } from "@/dict";
import { ElForm } from "element-plus";
import { cloneDeep } from "lodash-es";
import treatmentConfig from "@/config/treatmentConfig";
const yaoList = ref(treatmentConfig);
const handleYaoChange = (val, index) => {
  console.log(val, index);
  const data = yaoList.value.find((item) => item.name === val);
  console.log(data);
  const rowData = formModel.value.medicationSituation[index];
  rowData.a00_043_04 = data?.yongfa || "";
  rowData.a00_043_09 = data?.ci || "";
  if(data?.jiliang!==undefined){
    rowData.a00_043_05 = (data?.jiliang+data?.unit);
  }
  
};


const props = defineProps<{
  treatmentCondition: ITreatmentCondition;
}>();
const formSource = reactive(tjwx);

// const {} = formUtils(formModel)
const formRef = ref<InstanceType<typeof ElForm>>();
const formModel = ref(cloneDeep(props.treatmentCondition));
// watch(
//   () => {
//     return props.treatmentCondition;
//   },
//   (val) => {
//     formModel.value = val;
//   }
// );

const addRow = (source) => {
  if (source === "familyHospitalBed") {
    formModel.value.familyHospitalBed.push({
      a00_042_03: "",
      a00_042_04: "",
      a00_042_05: "",
      a00_042_06: "",
      a00_042_07: "",
      
    });
  } else if (source === "hospitalHistory") {
    formModel.value.hospitalHistory.push({
      a00_041_03: "",
      a00_041_04: "",
      a00_041_05: "",
      a00_041_06: "",
      a00_041_07: "",
    });
  } else {
    formModel.value.medicationSituation.push({
      a00_043_03: "",
      a00_043_04: "",
      a00_043_05: "",
      a00_043_06: "一年",
      a00_043_07: "1",
      a00_043_09: "",
    });
  }
};
const removeRow = (index, source) => {
  if (source === "familyHospitalBed") {
    formModel.value.familyHospitalBed.splice(index, 1);
  } else if (source === "hospitalHistory") {
    formModel.value.hospitalHistory.splice(index, 1);
  } else {
    formModel.value.medicationSituation.splice(index, 1);
  }
};
const handleFilter = (val)=>{
   if(val){
     yaoList.value = treatmentConfig.filter(item=>{
       if(item.name.indexOf(val)!==-1||item.szm.indexOf(val.toUpperCase())!==-1){
         return true;
       }
       return false;
     })
   }else{
     yaoList.value = treatmentConfig
   }
}

const validateForm = () => {
  return formRef.value?.validate();
};
const getData = () => {
  return toRaw(formModel.value);
};

defineExpose({ validateForm, getData });
</script>
<style>
.el-form--inline .el-form-item{
  margin-right: 0px !important;
}
</style>